<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  .container1 {
    width: 100%;
    height: 100px;
    align-items: center;

    /*元素水平居中*/
    margin-top: 30px;
    margin-bottom: 30px;

  }

  .first {
    display: flex;
    flex-direction: row;
    text-align: left;
  }

  .name1 {
    font-size: 16px;
  }

  .name2 {
    font-size: 16px;
  }

  .name3 {
    font-size: 16px;
  }



  .button1 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button2 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button3 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button4 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .container2 {
    width: 80%;
    height: 600px;
    align-items: center;

    /*边框*/
    /*元素水平居中*/
  }

  .demo-ruleForm {
    width: 30%;
  }

  .block {
    text-align: center;
  }
</style>

<body>

  <div id="app">
    <el-dialog title="影院修改" :visible.sync="alertUser" width="50%">
      <el-form :model="alertForm" ref="alertForm" label-width="100px">
        <el-form-item label="ID">
          <el-input v-model="alertForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="影院名称">
          <el-input v-model="alertForm.name"></el-input>
        </el-form-item>

        <el-form-item label="简介" prop="info">
          <el-input v-model="alertForm.info"></el-input>
        </el-form-item>
        <el-form-item label="座位列" prop="info">
          <el-input v-model="alertForm.siterows"></el-input>
        </el-form-item>
        <el-form-item label="座位行" prop="info">
          <el-input v-model="alertForm.sitecol"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatePlace" size="small">保存 </el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <div class="container2">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="影院列表" name="first">
          <el-table ref="multipleTable" border :data="pigList" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="name" label="影院名称" width="120">
            </el-table-column>
            <el-table-column prop="info" label="影院介绍" width="120">
            </el-table-column>
            <el-table-column prop="siterows" label="影院座位（行）" width="120">
            </el-table-column>
            <el-table-column prop="sitecol" label="影院座位（列）" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">
                  删除
                </el-button>
                <el-button type="text" size="small" @click.native.prevent="alertRow(scope.$index, pigList)">
                  修改信息
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <el-tab-pane label="添加影院" name="second">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
            <el-form-item label="影院名称" prop="name">
              <el-input v-model="ruleForm.name" label="IDSN"></el-input>
            </el-form-item>
            <el-form-item label="影院简介" prop="phone">
              <el-input maxlength="11" v-model="ruleForm.info"></el-input>
            </el-form-item>
            <el-form-item label="影院座位行">
              <el-input v-model="ruleForm.siterows"></el-input>
            </el-form-item>
            <el-form-item label="影院座位列">
              <el-input v-model="ruleForm.sitecol"></el-input>
            </el-form-item>


            <el-form-item>
              <el-button @click="createPlace" type="success" size="small">创建信息 </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {

      alertUser: false,
      alertForm: {
        id: 2,
        name: '',
        info: '',
        siterows: 0,
        sitecol: 0
      },
      ruleForm: {
        name: '',
        info: '',
        siterows: 0,
        sitecol: 0,
      }, options: [{
        value: '4',
        label: '销售员'
      },],

      formInline: {
        user: '',
        groupid: ''
      },

      activeName: 'first',
      pigList: [],
      multipleSelection: [],
      currentPage3: 5,
    },
    mounted() {
      this.getPlace();
    },
    methods: {
      createPlace() {
        console.log("ds")
        axios.post("/place/addPlace", { name: this.ruleForm.name, info: this.ruleForm.info, siterows: this.ruleForm.siterows, sitecol: this.ruleForm.sitecol }).then(res => {
          console.log(res);
          this.$notify.success({
            title: '添加成功',
            message: '添加成功！'
          })
          this.getPlace();
        })
      },
      getPlace() {
        console.log("ds")
        this.pigList = []
        axios.post("/place/getAllPlace", {}).then(res => {
          console.log(res);
          if (res.data.result == "ok") {
            res.data.data.forEach(ele => {
              this.pigList.push(ele)
            })
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      handleClick(tab, event) {

      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      deleteRow(index) {
        axios.post("/place/delPlace", { id: this.pigList[index].id }).then(res => {
          console.log(res);
          if (res.data.result == "ok")
            this.pigList.splice(index, 1)
          this.$notify.success({
            title: '删除成功',
            message: '删除成功！'
          })
        })
      },
      alertRow(index) {
        this.alertForm = this.pigList[index]
        this.alertUser = true;
      },
      updatePlace(index) {
        axios.post("/place/updatePlace", this.alertForm).then(res => {
          console.log(res);
          if (res.data.result == "ok") {
            this.$notify.success({
              title: '更新成功',
              message: '更新成功'
            })
            this.getPlace();
            this.alertUser = false;
          } else {
            this.$notify.error({
              title: '更新失败',
              message: '更新失败'
            })
          }
        })
      },
    }
  })
</script>

</html>